{% extends "base.html" %}

{% block content %}
<div class="row">
    <!-- 添加分类表单 -->
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-body">
                <h5 class="card-title">添加分类</h5>
                <form action="{{ url_for('add_category') }}" method="POST">
                    <div class="mb-3">
                        <label for="name" class="form-label">分类名称</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="type" class="form-label">分类类型</label>
                        <select class="form-select" id="type" name="type" required>
                            <option value="income">收入</option>
                            <option value="expense">支出</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">添加分类</button>
                </form>
            </div>
        </div>
    </div>

    <!-- 分类列表 -->
    <div class="col-md-8">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">我的分类</h5>
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary">收入分类</h6>
                        <div class="list-group">
                            {% for category in categories if category.type == 'income' %}
                            <div class="list-group-item" data-category-id="{{ category.id }}">
                                {{ category.name }}
                                <button class="btn btn-sm btn-danger float-end" 
                                        onclick="deleteCategory({{ category.id }})">
                                    删除
                                </button>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-danger">支出分类</h6>
                        <div class="list-group">
                            {% for category in categories if category.type == 'expense' %}
                            <div class="list-group-item" data-category-id="{{ category.id }}">
                                {{ category.name }}
                                <button class="btn btn-sm btn-danger float-end" 
                                        onclick="deleteCategory({{ category.id }})">
                                    删除
                                </button>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function deleteCategory(categoryId) {
    // 获取分类名称
    const categoryElement = document.querySelector(`[data-category-id="${categoryId}"]`);
    const categoryName = categoryElement ? categoryElement.textContent.trim() : '未知分类';
    
    // 显示更详细的确认对话框
    if (confirm(`确定要删除分类 "${categoryName}" 吗？\n\n注意：如果该分类正在被使用，将无法删除。`)) {
        fetch(`/category/${categoryId}/delete`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // 使用更友好的提示
                alert('分类删除成功！');
                window.location.reload();
            } else {
                // 显示具体的错误信息
                alert(data.message || '删除失败');
            }
        })
        .catch(error => {
            console.error('Delete category error:', error);
            alert('删除过程中发生错误: ' + error.message);
        });
    }
}
</script>
{% endblock %}
